<template>
  <div class="invoiceCertification">
    <x-header :left-options="{showBack: true,backText:''}" class="headerBox">
      <span>发票认证</span>
    </x-header>
    <group class="contBox">
      <x-input title="统一社会信用代码" v-model="invoice.code" placeholder="必填"></x-input>
      <x-input title="单位名称" v-model="invoice.enterprise" placeholder="必填"></x-input>
      <x-input title="注册地址" v-model="invoice.address" placeholder="必填"></x-input>
      <x-input
        title="注册电话"
        v-model="invoice.phone"
        name="mobile"
        placeholder="必填"
        keyboard="number"
        is-type="china-mobile"
      ></x-input>
      <x-input title="开户银行" v-model="invoice.bank" placeholder="必填"></x-input>
      <x-input title="银行账户" v-model="invoice.bankAccount" placeholder="必填"></x-input>
    </group>
    <div class="checkBox">
      <check-icon :value.sync="allow" class="radioBox">我已阅读同意</check-icon>
      <span @click="infoDialog=true">《增值税专用发票协议书》</span>
    </div>
    <div class="btnBox" @click="outShow=true">提交审核</div>
    <div class="footer">
      <p>1.注意有效增值税发票开票资质仅为一个；</p>
      <p>2.我们会在1-2个工作日内完成审核；</p>
    </div>
    <popup v-model="infoDialog" ide-on-blur height="60%">
      <div class="dialogBox">
        <x-icon type="ios-close-outline" size="26" class="closeIcon" @click="infoDialog=false"></x-icon>
        <div class="content">
          <p class="title">申请开具增值税专用发票协议书</p>
          <p
            class="des"
          >根据国家税法及发票管理相关规定，任何单位和个人不得要求他人为自己开具与实际经营业务情况不符的增值税专用发票【包括但不限于（1）在没有货物采购或者没有接受应税劳务的情况下要求他人为自己开具增值税专用发票；（2）虽有货物采购或者接受应税劳务但要求他人为自己开具数量或金额与实际情况不符的增值税专用发票】，否则属于“虚开增值税专用发票”。</p>
          <p class="des">我司已充分了解上述各项相关国家税法和发票管理规定，并确认：</p>
          <p class="des-num">1. 该会员确系我司委托的购买人，我司仅就实际委托其代为购买的商品或服务索取发票，并且索取发票的对应货款确由我司承担。</p>
          <p class="des-num">2.如我司未按国家相关规定申请开具或使用增值税专用发票，由我司自行承担相应法律后果，并配合苏宁或税务机关的核实调查工作。</p>
          <p class="des-num">3. 我司确认该会员所填开票信息正确无误，若因开票信息错误等原因造成的相关损失，由我司自行承担。</p>
          <p class="des-num mb20">特此确认！</p>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import { XHeader, XInput, Group, XButton, Cell, CheckIcon, Popup } from 'vux'

export default {
  components: {
    XHeader,
    XInput,
    Group,
    Cell,
    CheckIcon,
    Popup
  },

  data() {
    return {
      allow: false,
      infoDialog: false,
      invoice: {
        code: '',
        enterprise: '',
        phone: '',
        address: '',
        bank: '',
        bankAccount: ''
      }
    }
  },

  methods: {}
}
</script>

<style lang="less" scoped>
.invoiceCertification {
  // 头部导航
  /deep/.headerBox {
    z-index: 9;
    background-color: #fff;
    border-bottom: 2px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
      margin: 0 100px;
    }
  }
  /deep/.contBox {
    .weui-cells {
      margin-top: 0;
    }
    .vux-popup-picker-select {
      text-align: left !important;
      margin-left: 36px;
      .vux-popup-picker-placeholder {
        color: #757575;
      }
      .vux-cell-value {
        color: #757575;
      }
    }
    .defaultBox {
      .weui-cell__bd {
        flex: 0;
      }
    }
    .weui-icon-success:before {
      color: #f60;
    }
  }
  .checkBox {
    padding: 20px;
    /deep/.radioBox {
      .weui-icon-success:before {
        color: #f60;
      }
      span {
        color: #666;
        margin-right: 20px;
        font-size: 26px;
      }
    }
    span {
      font-size: 26px;
    }
  }

  .btnBox {
    margin: 40px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    background-color: #f60;
    color: #fff;
    border-radius: 20px;
    font-size: 30px;
  }
  .dialogBox {
    position: relative;
    .closeIcon {
      position: absolute;
      right: 20px;
      top: 10px;
    }
    .content {
      padding: 0 20px;
      overflow-x: scroll;
      .title {
        font-size: 34px;
        margin-top: 40px;
        color: #222;
      }
      .des {
        font-size: 28px;
        margin-top: 20px;
        color: #666;
      }
      .des-num {
        font-size: 28px;
        color: #222;
        margin-top: 20px;
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 50px;
    left: 20px;
    right: 20px;

    p {
      font-size: 26px;
      color: #666;
    }
  }
}
</style>